<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="../js/vue-3.2.26.js"></script>
</head>
<body>
<div id="app">
  <!-- 没有参数时括号可以省略 -->
  <button @click="btn1">1无参不带括号</button>
  <br>
  <!-- 完整写法 -->
  <button @click="btn2()">2无参带()</button>
  <br>
  <!-- 调用的方法没有接收参数也不会报错 -->
  <button @click="btn3('参数1')">3无参带()传值，不会报错</button>
  <br>
  <!-- 传递event对象 -->
  <button @click="btn4">4有参不带括号，会传递event</button>
  <br>
  <!-- 传递undefined -->
  <button @click="btn5()">5有参带()，会传递undefined</button>
  <br>
  <!-- 传递参数 -->
  <button @click="btn6('参数1')">6有参带()传值</button>
  <br>
  <!-- 调用的方法没有接收参数也不会报错 -->
  <button @click="btn7('参数1','参数2')">7有1参带()传2值，不会报错</button>
  <br>
  <!-- 必须使用$event来传递event对象 -->
  <button @click="btn8('参数1',$event)">8传event和值</button>
  <br>
  <!-- 不带''是变量，会从data中寻找 -->
  <button @click="btn9(counter,$event)">9传event和变量</button>
  <hr>
  <!-- 修饰符的使用 -->
  <!-- @click.stop阻止向上冒泡 -->
  <div @click="divStop">
    <span>点击按钮会向上冒泡</span>
    <!-- 点击按钮会向上冒泡 -->
    <button @click="btnStop">stop</button>
  </div>
  <div @click="divStop">
    <span>阻止向上冒泡</span>
    <!-- @click.stop阻止向上冒泡 -->
    <button @click.stop="btnStop">stop</button>
  </div>
  <hr>
  <!-- @click.prevent阻止默认事件 -->
  <form action="aaa">
    <!-- 会自动提交表单 -->
    <label>自动提交表单</label>
    <input type="submit" value="表单提交" @click="formSubmit">
  </form>
  <form action="aaa">
    <!-- @click.prevent阻止了表单自动提交 -->
    <label>阻止了表单自动提交</label>
    <input type="submit" value="表单提交" @click.prevent="formSubmit">
  </form>
  <hr>
  <!-- keyup/keydown.键码/键名，监听某个按键，不写监听全部 -->
  <label>监听全部按键</label>
  <input type="text" @keyup="key">
  <br>
  <!-- 只监听enter按键 -->
  <label>只监听enter按键</label>
  <input type="text" @keyup.enter="key">
  <hr>
  <!-- @click.once只执行一次 -->
  <button @click="once">点击</button>
  <!-- 只有第一次点击有效 -->
  <button @click.once="once">只有第一次点击有效</button>
</div>
</body>
<script>
  const App = {
    data() {
      return {
        counter: 24
      }
    },
    methods: {
      divStop() {
        console.log('点击了div');
      },
      btnStop() {
        console.log('点击了btn');
      },
      formSubmit() {
        console.log('表单提交');
      },
      key(event) {
        console.log(event.key);
      },
      once() {
        console.log("点击");
      },
      btn1() {
        console.log('btn1');
      },
      btn2() {
        console.log('btn2');
      },
      btn3() {
        console.log('btn3');
      },
      btn4(a) {
        console.log('btn4', '-----------', a);
      },
      btn5(a) {
        console.log('btn5', '-----------', a);
      },
      btn6(a) {
        console.log('btn6', '-----------', a);
      },
      btn7(a) {
        console.log('btn7', '-----------', a);
      },
      btn8(a, event) {
        console.log('btn8', '-----------', a, '++++++++++', event);
      },
      btn9(a, event) {
        console.log('btn9', '-----------', a, '++++++++++', event);
      },
    },
  }
  const app = Vue.createApp(App).mount("#app");
</script>
</html>
